<template>
	
	
	<!-- 特权详情 -->
	<view class="privilegedetail">
		<view v-if="!is404"> 
			<view  class="detailImgBox" @click="imgSession">
				<image :src="userObj.srcPhoto[0]" mode="widthFix"></image>
			</view>
			<view v-if="!userObj.hasBuy && isQR == 0" class="detailImgQRNamess">{{userObj.privilegeTitle}}</view>
			<!-- 二维码 -->
			<view v-if="userObj.hasBuy || isQR == 1" class="detailImgQRBox">
				<view class="detailImgQRName">{{userObj.privilegeTitle}}</view>
				<image class="detailImgQRImg" :src="QR.code"></image>
				<view class="detailImgQRNum">{{QR.numbe}}</view>
			</view>
			<!-- 正常参数 -->
			<view v-if="isQR == 2" class="abstractBox">
				<view class="recommendItemName">{{userObj.privilegeTitle}}</view>
				<view class="recommendItemMian">
					{{userObj.coin | mian(userObj.consumeType)}}<span  v-if="userObj.consumeType != 1" >面值</span><span  v-if="userObj.consumeType == 3"  class="recommendItemGan">/</span>{{userObj.price  | price(userObj.consumeType)}}<span v-if="userObj.consumeType != 2">元</span>
				</view>
			</view>
			
			
			<view class="u-content">
				<view class="contTitle">特权卡介绍：</view>
				<u-parse :html="userObj.content" :tag-style="style"></u-parse>
			</view>
			<!-- "consumeType": 3, //消费类型：1=人民币 2=面值 3=二选一 -->
			
			<view class="dealBox" v-if="!userObj.hasBuy && isQR == 0 && isconsumeType">
				<view class="dealButss">立即使用</view>
			</view>
			<view class="dealBox" v-else-if="!userObj.hasBuy && userObj.consumeType == 3 && isconsumeType">
				<view class="dealLeft" @click.stop="show01 = 0">直接购买</view>
				<view class="dealRight" @click.stop="show01 = 1">面值兑换</view>
			</view>
			<view class="dealBox" v-else-if="!userObj.hasBuy && userObj.consumeType == 1  && isconsumeType">
				<view class="dealButss" @click.stop="show01 = 0">直接购买</view>
			</view>
			<view class="dealBox" v-else-if="!userObj.hasBuy && userObj.consumeType == 2  && isconsumeType">
				<view class="dealButss" @click.stop="show01 = 1">面值兑换</view>
			</view>
			
			<!-- 弹窗 -->
			<u-popup v-model="isPupers" mode="bottom" height="440rpx" border-radius=15>
				<view class="popupBox01">
					<view class="popupBox01Text">使用{{show01 == 1 ? userObj.coin : show01 == 0 ? userObj.price : '' }}{{show01 == 1 ? '面值兑换' : show01 == 0 ? '元购买' : ''}}「{{userObj.privilegeTitle}}」吗？</view>
					<view class="popupBox01Buts">
						<view class="popupBox01ButsLeft" @click.stop="ffChacha">取消</view>
						<view class="popupBox01ButsRight" @click.stop="ffMeet">立即{{show01 == 1 ? "兑换" : show01 == 0 ? "购买" : '' }}</view>
					</view>
				</view>
			</u-popup>
			
			<perfectbox :img="imgs"  pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isTaost" @ff_show="ffShows">
			</perfectbox>
		</view>
		<view v-else>
			<cmerror></cmerror>
		</view>
	</view>
</template>

<script>
	import perfectbox from "../../../components/perfectbox/perfectbox.vue"
	import cmerror from "../../../components/cmerror/cmerror.vue"
	export default {
		data() {
			return {
				is404: false,
				isconsumeType:true,
				isPupers: false,
				QR:{
					code: "https://z3.ax1x.com/2021/09/03/h6iCjJ.png",
					numbe: "4045 4840 658 132"
				},
				title: 'privilegedetail',
				userObj: {
					srcPhoto: ["https://z3.ax1x.com/2021/09/03/hyCDcd.png"],
					price: 99,
					mian: 2000,
					name: '太二酸菜鱼免排队卡',
				},
				content: `
									<p>「占位文本」风嚣茁途婆茁在挥兰惜郭褐等，贺社势尊息愁肯乒猎茎刽寮医锈遗架滩哄野荡钱警糖迫沫灼楞异钝否笨，疯蚕羞私丽贮惜厅，官摄硝蔽岛签住废婚哇费蕴痕淮服扁饲胶盒且睾恳欢簧桐骑特劲着臣每嘴星额封火啦爽挣蜗影其初杏？垛…签轨钠千姚锁蜕歇快句过鹅集刘懂窝、龙，杉嫂容去排洒帝学昂唉番灸那陪凝肪饥咬只慢亮、鸭灭绵标鼠杰新酯或纵域，耐拚茬阱炉钾棒泛。屠展铃尿泰咬俩申敦奸飞大沉瓷芽率！</p>
									<img src="https://z3.ax1x.com/2021/09/03/hyHVt1.png" />
									<img src="https://z3.ax1x.com/2021/09/03/hyHEkR.png" />
									<p>「占位文本」风嚣茁途婆茁在挥兰惜郭褐等，贺社势尊息愁肯乒猎茎刽寮医锈遗架滩哄野荡钱警糖迫沫灼楞异钝否笨，疯蚕羞私丽贮惜厅，官摄硝蔽岛签住废婚哇费蕴痕淮服扁饲胶盒且睾恳欢簧桐骑特劲着臣每嘴星额封火啦爽挣蜗影其初杏？垛…签轨钠千姚锁蜕歇快句过鹅集刘懂窝、龙，杉嫂容去排洒帝学昂唉番灸那陪凝肪饥咬只慢亮、鸭灭绵标鼠杰新酯或纵域.！</p>
						`,
				style:{
					p:`font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 500;
						text-align: LEFT;
						color: #2d3034;
						line-height: 50rpx;
						letter-spacing: 2rpx;
						margin-bottom: 20rpx;
						word-wrap:break-word;`,
					img:`margin-bottom: 20rpx`,
					div:`font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 500;
						text-align: LEFT;
						color: #2d3034;
						line-height: 50rpx;
						letter-spacing: 2rpx;
						margin-bottom: 20rpx;
						word-wrap:break-word;
						`,
					text:`font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 500;
						text-align: LEFT;
						color: #2d3034;
						line-height: 50rpx;
						letter-spacing: 2rpx;
						margin-bottom: 20rpx;
						word-wrap:break-word;
						`,
					
				} ,
				// menuButtonInfo: {
				// 	top: 25
				// },
				// 0：兑换 1：购买  2：什么都没有
				show01:2,
				isQR: 2,
				privilegeId: null,
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isTaost: 2,
				imgs: '',
				inviteCodex: '',
			}
		},
		onLoad(option) {
			// debugger
			this.init();
			if(Number(option.state) != 2 && option.state != undefined){
				console.log('option.state=====>',option.state)
				// debugger
				this.isQR = Number(option.state);
				// console.log('this.isQR')
				// this.privilegeId = option.privilegeId;
				// this.initData();
			}
				this.privilegeId = option.privilegeId;
				this.initData();

		},
		components: {
			cmerror,
			perfectbox,
			},
		filters:{
			price(val,consumeType){
				let newVal = consumeType == 2 ? '' : val;
				return newVal
			},
			mian(val,consumeType){
				let newVal = consumeType == 1 ? '' : val;
				return newVal
			}
		},
		watch:{
			show01(newer,older){
				this.initOnShow().then(res=>{
					this.isTaost = res;
					if(res == 2){
						if(newer != 2){
							this.isPupers = true;
							// debugger
						}else{
							this.isPupers = false;
						}
					}
				})
			},
			isPupers(newer,older){
				// debugger
				if(!newer){
					// this.show01 = 2;
					setTimeout(()=>{
						 this.show01 = 2
					},100)
				}
			},
		},
		onShareAppMessage(res) {
		  if (res.from === 'button') {// 来自页面内分享按钮
		    console.log(res.target)
		  }
		  return {
		    title: 'chimian',
		    path: `/pages/privilege/privilegedetail/privilegedetail?privilegeId=${this.privilegeId}`
		  }
		},
		methods: {
			ffShows() {
				this.isTaost = 2;
			},
			initOnShow() {
			
				return new Promise((ress,rejj)=>{
					this.$apis.accountInfo().then(res => {
						if (res.code == 200) {
							this.userPhoneApi = res.data.phone;
							this.imgs = res.data.awardPrivilegeBg;
							if (res.data.needInviteCode) {
								
								if (res.data.inviteCode) {
									this.inviteCodex = res.data.inviteCode.code;
									if (!res.data.isMember) {
										// debugger
										// this.isShow = 0
										// this.$emit('updataShow',)
										ress(0);
									} else {
										// debugger
										// this.isShow = 2
										// this.$emit('updataShow',2)
										ress(2);
									}
								}
							} else {
								if (!res.data.isMember) {
									// debugger
									// this.$emit('updataShow',1)
									ress(1);
									// this.isShow = 1
									// 
									
								} else {
									// debugger
									// this.$emit('updataShow',2)
									ress(2);
									// this.isShow = 2
								}
							}
						}
								
								
								
						console.log("个人信息成功", res)
					}).catch(err => {
						// this.isShow = 0;
						
						ress(0);
						console.log("个人信息错误", err)
					})
					})
				
			},
					
			init() {
				// // #ifndef H5 || APP-PLUS || MP-ALIPAY
				// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// // #endif
			},
			initData(){
				// let a = this.privilegeId;
				// debugger
				this.$apis.privilege(this.privilegeId).then(res=>{
					console.log("res===>",res);
					// debugger
					if(res.code == 200){
						let obj = res.data;
						obj.srcPhoto = [res.data.privilegeImage];
						this.userObj = obj;
					}else if(res.code == 404){
						
						this.is404 = true
					}
				});
			},
			goNavigateBack() {
				uni.navigateBack();
			},
			// 刷新二维码
			privilegeqrCode(userPrivilegeId){
				// debugger
				uni.showLoading({
				    title: '交易中'
				});
				this.$apis.privilegeQrCode(userPrivilegeId).then(res=>{
					// debugger
					this.isQR = 1;
					this.isconsumeType = false;
					this.QR.code = res.data;
					uni.showToast({
						title:"购买成功"
					});
				})
			},
			ffChacha(){
				this.isPupers = false;
				
				// this.show01 = 2
			},
			ffMeet(){
				let a = this.userObj;
			
				if(this.userObj.hasBuy){
					uni.showToast({
						title:"已购买!",
						duration:2500
					})
					setTimeout(()=>{
						this.show01 = 2;
					},2500)
					
					// return;
				}else{
					
					
					//show01支付类型  0：兑换 1：购买  2：什么都没有
					let consumeType = this.show01 == 1 ? 2 : this.show01 == 0 ? 1 : '';
				
					
					this.$apis.privilegeCreate(this.privilegeId,consumeType).then(res=>{
					     // debugger
						if(res.code == 200 && res.data.payStatus == 0){
							
							this.$apis.privilegePay(res.data.payNo).then(res01=>{
								// debugger
					
								if(res01.code != 200){
			
									let a = res01;
										// debugger
									  uni.showToast({
									      title:  res01.data.msg ,
										  icon : 'none',
									      duration: 2000
									  });
								}else{
									if(res01.data.needPay){
										let reqq = {};
										reqq.timeStamp     = res01.data.result.timeStamp;
										reqq.nonceStr      = res01.data.result.nonceStr;
										reqq.package       = res01.data.result.packageValue;
										reqq.signType      = res01.data.result.signType;
										reqq.paySign       = res01.data.result.paySign;
										wx.requestPayment({
											...reqq,
											success: (resPay)=>{
												
												this.isPupers = false;
												this.isPay(res01.data.privilege.payNo,res01.data.privilege.userPrivilegeId);
											},
											fail: (resPay)=>{
												// debugger
												uni.showToast({
													icon : 'error',
													title : '支付失败'
												})
											}
										})
										// 微信支付
										// this.isPay();
										
									}else{
										
										// 面值抵扣
										this.isPay(res01.data.privilege.payNo,res01.data.privilege.userPrivilegeId);
										
										// 0：兑换 1：购买  2：什么都没有
										
									}
									
									
								}
							})
								
						}else if(res.code == 200 && res.payStatus == 1){
							console.log('已支付过了')
						}else{
							uni.showToast({
								icon : 'none',
								title : res.msg
							})
						}
						
						//amianfrontend/privilege/pay/{payNo}
						console.log(res)
					})
					
				}
				// debugger
			
				
			},
			 // 判断是否支付
			isPay(payNo,userPrivilegeId){
				this.$apis.privilegeQuery(payNo).then(res02=>{
				 console.log("res02===>",res02)
				 if(res02.code == 200){
					 if(this.show01 == 1){
						 // debugger
						 // this.show01 == 1 ? "面值不足" : this.show01 == 0 ? "余额不足" : '',
						 uni.showToast({
						 	title:"兑换成功"
						 });
						 this.isQR = 0;
						 this.isPupers = false;
					 }else if(this.show01 == 0){
						 uni.showToast({
						 	title:"购买成功"
						 });
						 this.isQR = 1;
						  this.QR.numbe = this.$Tools.Cardformat(payNo);
						  this.privilegeqrCode(userPrivilegeId);
						  this.isPupers = false;
					 }
					 setTimeout(()=>{
						 this.show01 = 2;
					 },2000)
					
				 }
				})
			},
			imgSession() {
				// debugger
				uni.previewImage({
					urls: this.userObj.srcPhoto,
				});
			}
		}
	}
</script>

<style lang="scss">
	.privilegedetail {
		padding-bottom: 145rpx;
		.bg_top {
			
			width: 750rpx;
			background-color: #ffffff;
			position: fixed;
			z-index: 9;
		}

		.z_index {
			z-index: 10;
		}

		.top {
			width: 750rpx;
			height: 48rpx;
			background-color: #FFFFFF;
			position: fixed;
			padding-bottom: 20rpx;
		}

		.top_icon {
			margin-left: 32rpx;
			display: inline-block;
		}

		.top_title {
			position: absolute;
			font-size: 34rpx;
			font-weight: 500;
			line-height: 48rpx;
			display: inline-block;
			left: 50%;
			transform: translate(-50%);
			font-family: PingFang SC, PingFang SC-Medium;
			color: #000000;
		}

		.detailImgBox {
			width: 750rpx;
			height: 790rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f5f6f9;

			image {
				width: 516rpx;
				// height: 516rpx;
			}
		}

		.detailImgQRBox{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 45rpx 0;
		}
		.detailImgQRName{
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: LEFT;
			color: #2d3034;
		}
		.detailImgQRNamess{
			font-size: 36rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: LEFT;
			color: #2d3034;
			padding: 45rpx 40rpx;
		}
		.detailImgQRImg{
			width: 440rpx;
			height: 440rpx;
		}
		.detailImgQRNum{
			font-size: 34rpx;
			font-family: Montserrat, Montserrat-Regular;
			font-weight: 400;
			text-align: CENTER;
			color: #606266;
		}

		.abstractBox {
			box-sizing: border-box;
			padding: 50rpx 40rpx 30rpx;
		}

		.recommendItemName {
			font-size: 40rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: LEFT;
			color: #2d3034;

		}

		.recommendItemMian {
			color: #F10200;
			font-size: 40rpx;
			font-weight: 600;
			font-family: nominal;
			// display: flex;
			// align-items: flex-end;
			// margin-top: 10rpx;

			span {
				display: inline-block;
				font-size: 22rpx;
				font-weight: 700;
				padding: 0 3rpx;
				transform: translateY(-2rpx);
			}
		}

		.recommendItemGan {
			font-size: 28rpx !important;
			font-weight: 500 !important;
			transform: translateY(-2rpx);

		}
		.contTitle{
			font-size: 31rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			margin-bottom: 5rpx;
			
		}

		.u-content {
			box-sizing: border-box;
			padding: 0 40rpx;
		}
		.dealBox{
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			justify-content: space-between;
			background: #fff;
			padding: 20rpx 33rpx 56rpx;
			box-sizing: border-box;
			border-top: 2rpx solid #ece4e4;
			
		}
		.dealLeft{
			width: 324rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 550;
			text-align: CENTER;
			color: #c8cacc;
			border: 2rpx solid #e1e3e5;
			border-radius: 12rpx;
		}
		.dealRight{
			width: 324rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-size:34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 550;
			text-align: CENTER;
			color: #ffffff;
			background-color: #F10200;
			border-radius: 12rpx;
		}

		.popupBox01{
			padding: 0 40rpx;
			background-color: #fff;
			
		}
		
		.popupBox01Text{
			    font-size: 39rpx;
			    font-family: nominal;
			    font-weight: 700;
			    text-align: LEFT;
			    color: #2d3034;
			    padding: 77rpx 41rpx;
			    line-height: 49rpx;
		}
		.popupBox01Buts{
			display: flex;
			justify-content: space-between;
		}
		.popupBox01ButsLeft{
			width: 324rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 550;
			text-align: CENTER;
			color: #c8cacc;
			border-radius: 12rpx;
		}
		.popupBox01ButsRight{
			width: 324rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 550;
			text-align: CENTER;
			border: 2rpx solid #e1e3e5;
			color: #ffffff;
			background-color: #F10200;
			border-radius: 12rpx;
		}
		.dealButss{
			    width: 670rpx;
			    text-align: center;
			    font-size: 34rpx;
			    height: 75rpx;
			    opacity: 1;
			    background: #f10200;
			    border-radius: 12rpx;
			    color: #fff;
			    line-height: 75rpx;
			    font-weight: 550;
		}
		
	}
</style>
